<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="mobileoptimized" content="800" />
    <meta name="viewport" content="user-scalable=no" />
    <title>PhoneGap - WP7 : Proof of concept</title>
    <link rel="stylesheet" type="text/css" href="jquery.mobile-1.0b2.css" />
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0b2.js"></script>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript">
        var oaId = 0;
        var obId = 0;
        var watchId = 0;

        function onLoad() {
            if (PhoneGap.available) {
                window.debug.log('PhoneGap is available!');
                window.debug.log(navigator);
                navigator.geolocation.watchPosition();
            }
            else {
                window.debug.error('PhoneGap not available');
            }
        }

        function StartGeolocationWatch() {
            watchId = navigator.geolocation.watchPosition(geolocationSuccessEvent, geolocationFailureEvent, {frequency:1000});
        }

        function StopGeolocationWatch() {
            navigator.accelerometer.clearWatch(watchId);
        }

        function geolocationSuccessEvent(position) {
            document.getElementById("geolocationResult").innerHTML = position.coords.latitude + ',' + position.coords.longitude;
        }

        function geolocationFailureEvent(val) {
            document.getElementById("geolocationResult").innerHTML = 'Error : ' + val;
        }

    </script>
</head>
<body onload="onLoad()">
    <div data-role="page" id="jqm-home" class="type-home">
        <div data-role="content">
            <div class="content-secondary">
                <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
                    <li data-role="list-divider">GeoLocation Watch</li>
                    <li onclick="StartGeolocationWatch()">Start</li>
                    <li onclick="StopGeolocationWatch()">Stop</li>
                    <li onclick="window.location='index.html'">Home</li>
                </ul>
            </div>
            <div data-role="content" class="type-home" id="geolocationResult" ></div>
        </div>
    </div>
</body>
</html>
